<template>
	<scroll-view scroll-y="true" @scrolltolower="loadMoreData" lower-threshold="200" :style="{height: wh+'px'}">
		<view class="container">
			<view class="searchbox">
				<view class="search">
					<view class="search-map" @click="mapClick">
						<image class="icon-map" src="@/static/images/home/icon_map.png" mode=""></image>
						<view>地图</view>
					</view>
					<view class="searchinputbox flex space-between">
						<input class="search-input" @input="getsuggest" placeholder="请输入商品名称" :value="searchKey"
							placeholder-class="placeholder" />
						<view class="search-text" @click.stop="getGoodsList">
							<image class="icon-search" src="@/static/images/home/search.png" mode=""></image>
						</view>
					</view>

				</view>
				<!--      <scroll-view class="option" scroll-y="true" v-show="IsOption">-->
				<!--        &lt;!&ndash;关键词输入提示列表渲染&ndash;&gt;-->
				<!--        <view class='column_item' v-for="(item,index) in suggestion" :key="index" @click="tapOption(item)">-->
				<!--          <view>-->
				<!--            &lt;!&ndash;根据需求渲染相应数据&ndash;&gt;-->
				<!--            &lt;!&ndash;渲染地址title&ndash;&gt;-->
				<!--            <view style="text-align:left;">{{item.title}}</view>-->
				<!--            &lt;!&ndash;渲染详细地址&ndash;&gt;-->
				<!--            <view style="font-size:12px;color:#666;text-align:left;">{{item.addr}}</view>-->
				<!--          </view>-->
				<!--        </view>-->
				<!--      </scroll-view>-->
			</view>
			<!-- 轮播图 -->
			<view class="swiperbox">
				<swiper autoplay circular indicator-dots indicator-active-color="#6C64D0">
					<swiper-item v-for="(item,i) in swipers" :key="i">
						<image :src="item.imageurl"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 共享/售卖专区 -->
			<view class="zonebox">
				<view class="box-item share" @click="turnTo('sharedzone')">
					<image src="/static/images/home/icon_share.png"></image>
					<view>
						<h4>共享专区</h4>
						<h6>节能环保全民行动</h6>
					</view>
				</view>
				<view class="box-item sell" @click="turnTo('saleszone')">
					<image src="/static/images/home/icon_sell.png"></image>
					<view>
						<h4>售卖专区</h4>
						<h6>零中介零差价</h6>
					</view>
				</view>
			</view>

			<view class="line"></view>

			<!-- 商品 start -->

			<view class="goodslistBox">
				<view class="selectbox">
					<view class="rangeselectbox">
						<uni-data-select v-model="rangevalue" placeholder="距离选择" :localdata="ranges"
							@change="rangechange"></uni-data-select>
						<view class="icon">
							<image src="/static/images/home/icon_select.png"></image>
						</view>
					</view>
					<view class="typeselectbox">
						<uni-data-select v-model="typevalue" placeholder="品类选择" :localdata="types"
							@change="typechange"></uni-data-select>
						<view class="icon">
							<image src="/static/images/home/icon_select.png"></image>
						</view>
					</view>
				</view>
				<!-- 筛选 end -->
				<view class="image" v-if="goodslist.length==0"
					:style="{'background-image':`${ mediaUrl }${ goodsbg }`}"></view>
				<view class="pubuItem">

					<view class="cont-box" :style="{ '--layout-width': 100 / 2 - columnSpace + '%' }"
						v-for="(numVal, index) in 2" :key="numVal">
						<view class="item-box" v-for="(item, j) in goodslist[`column_${index + 1}`]" :key="j" @click='goodsClick(numVal,j)'>
							<image class="img-tip"  :src="item.image" mode="widthFix" lazy-load />
							<view class="des-box">
								<view class="tit-tip multi-line-omit ">
									{{formatProductName(item.goodsname)}}
									
								</view>
								<view class="filter space-between ">
									<view class="distance">
										<image class="icon-location" src="@/static/images/home/icon_location.png"
											mode="">
										</image>
										<text>{{item.juli}}km</text>
									</view>
									<view class="score">
										<text class="em">
											<text class="red">{{item.money}}</text>
											{{item.type == 1 ? '金币' : '元' }}
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>


					<!-- <view class="item-masonry" v-for="(item, index) in goodslist" :key="index"
									@click="goodsClick(item)">
									<image :src="mediaUrl+item.image" mode="widthFix"></image>
									<view class="listtitle"> 
										<view class="listtitle1">{{formatProductName(item.goodsname)}}</view>
										<view class="listtitle2">
											{{item.money}}</text>{{item.type == 1 ? '金币' : '元' }}
										</view>
										<view class="listtitle3">
											{{item.goodsdetail}}
										</view>
									</view>
								</view> -->
				</view>
			</view>
		</view>



		<!-- 商品 end -->
		<!-- 没有更多了 start -->
		<view class="no-more">~客官已经到底了~</view>
		<!-- 没有更多了 end -->
		<!-- 悬浮发布按钮 -->
		<view>
			<movable-area class="movableArea">
				<movable-view class="movableView1" direction="all" x="630rpx" y="630rpx">
					<image :src="moveballicon" mode="widthFix" @click="publishClick"></image>
				</movable-view>
				<!-- <movable-view class="movableView2" direction="all" x="630rpx" y="920rpx">
          <button open-type="contact">
            <view class="content">
              <u-icon name="server-man" color="#2979ff" size="30"></u-icon>
              <text class="textbox">客服</text>
            </view>
          </button>
        </movable-view> -->
				<!-- <movable-view class="movableView3" direction="all" x="630rpx" y="1040rpx">
          <button @click="shareclick">
            <view class="content">
              <u-icon name="share-square" color="#2979ff" size="25"></u-icon>
              <text class="textbox">分享</text>
            </view>
           </button>
         </movable-view> -->
			</movable-area>
		</view>

		<MyLogin v-if="showlogin" :showlogin.sync="showlogin"></MyLogin>

		<u-modal class="notice" :show="showNotice" :title="noticeTitle" confirmText="同意" :content='noticeContent'
			@confirm="showNotice = false"></u-modal>
		</view>
	</scroll-view>
</template>

<script>
	import {
		formatProductName
	} from "../../utils/common";

	var self, mapCtx
	import QQMapWX from '../../utils/qqmap-wx-jssdk'
	var qqmapsdk;
	import MyLogin from '@/components/my-login.vue'
	export default {
		components: {
			MyLogin
		},
		data() {
			return {
				wh: 0, //网页元素的高度
				// leftGoodsList: [],
				// rightGoodsList: [],
				type: 0, //0全部1共享2售卖
				columnSpace: 2,
				showNotice: false,
				noticeTitle: '重要提示',
				noticeContent: '我们更新了《共享空间隐私政策》，请在使用共享空间各项服务前，仔细阅读并理解，特别是以粗体线标识的条款，您应重点阅读，在确认充分理解并同意后再开始使用。',
				filter: [{
					name: '距离',
					image: '@/static/images/icon-location.png',
					type: 1,
				}, {
					name: '类别',
					image: '@/static/images/icon-location.png',
					type: 2
				}], // 筛选
				videoUrl: '/media/image/show1.mp4',
				mediaUrl: uni.$http.mediaUrl,
				openid: '',
				yaoqingid: '',
				swipers: [{
					id: 0,
					imageurl: '/static/images/home/swiper.png'
				}],
				// 默认加载全部,因为有的人附近可能没商品
				rangevalue: '',
				ranges: [{
					value: 0,
					text: "全部"
				}, {
					value: 1,
					text: "1公里内"
				}, {
					value: 2,
					text: "3公里内"
				}, {
					value: 3,
					text: "5公里内"
				}],

				typevalue: '',
				typetext: "",
				types: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "家用电器"
					}, {
						value: 2,
						text: "数码设备"
					}, {
						value: 3,
						text: "电脑办公"
					},
					{
						value: 4,
						text: "家具"
					}, {
						value: 5,
						text: "图书"
					}, {
						value: 6,
						text: "母婴玩具"
					},
					{
						value: 7,
						text: "服饰"
					}, {
						value: 8,
						text: "美妆"
					}, {
						value: 9,
						text: "食品"
					}, {
						value: 10,
						text: "其他"
					}
				],

				moveballicon: '/static/images/home/pubopen.png',
				goodsbg: '/media/image/null.png',

				notices: [],
				goodslist: [],
				goodslistnum: 0,
				searchLoading: false,
				searchLoadingComplete: false,
				page: 0, //page代表开始的id.从哪开始往后查,一次返回十个
				pugeFind: null,

				searchKey: '',

				location: {
					latitude: 33.002125,
					longitude: 112.495972,
					address: '卧龙区舒心园'
				},

				showlogin: false,
				videoshow: false,
				hasPause: true,
				groupList:[],
			};
		},
		onLoad(options) {
			// 把邀请人的id存下来
			if (options.yaoqingren) {
				uni.setStorageSync('yaoqingid', options.yaoqingren)
			}

			// console.log(options)
			// this.getMsg()
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight - 300
			qqmapsdk = new QQMapWX({
				key: this.wemapkey
			});
			self = this
			// 获取当前map
			mapCtx = wx.createMapContext('idMap')
			this.videoshow = true
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// let a = undefined;
			// console.log(JSON.parse(a))

			// 蒙版公告
			/*this.showNotice = true*/
			// 获取窗口高度
			const res = uni.getSystemInfoSync();
			this.wh = res.windowHeight;

		},
		onPullDownRefresh(e) {
			console.log("上拉")
			// self.goodslist = [];
			// self.page = 0;

		},
		onShow() {
			self.goodslist = [];
			self.page = 0;
			this.getAuthorizeInfo();
			setTimeout(() => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			}, 50);
			// if(uni.getStorageSync('hasPause')==true){
			// 	this.hasPause = true
			// }else{
			// 	this.hasPause = false
			// }
			// console.log(1)
			// this.getGoodsList()

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '闲置交易，共享资源', // 标题
				path: '/pages/home/home?yaoqingren=' + this.openid, // 分享路径
				imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg' // 分享图
				// desc: '闲置交易，共享资源'
			}

		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '胶南街道召开“红帆支部”观摩学习暨工作推进会',
				type: 0,
				summary: "2222222",
			}
		},
		onHide() {
			// this.videoshow = false
		},
		// created() {
		// 	/* 初始化每一列的数据 */
		// 	for (let i = 1; i <= 2; i++) {
		// 		this.$set(this.flowData, `column_${i}`, []);
		// 	}
		// },
		onReady() {
			// 内容应该从后台取.并且时间设定为一天触发一次
			// uni.showModal({
			// 	title: '本月活动',
			// 	content: '	凡将小程序分享给新用户并登录者，将获得一积分奖励，可在共享专区购买任何物品，如有疑问请联系客服',
			// 	showCancel:false,
			// 	confirmText:"朕已阅",
			// 	success: function(res) {
			// 		if (res.confirm) {
			// 			console.log('用户点击确定');
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消');
			// 		}
			// 	}
			// });

		},
		computed: {

		},
		methods: {
			formatProductName,
			/* 数据初始化 */
			initData() {
				// console.log(this.goodslist)
				this.groupList = this.dynamicGrouping(this.goodslist, 2); // 数据动态分组
				this.groupList.forEach((item, i) => (this.goodslist[`column_${i + 1}`] = item));
				// console.log(groupList)
			},
			/** 数据动态分组
			 * @param {Object} data 分组的数据列表
			 * @param {Object} i 需要分几组
			 * @returns {Array} groups 已分组的数据
			 */
			dynamicGrouping(data, i) {
				if (i <= 0) return "分组数必须大于0";
				const groups = [];
				for (let j = 0; j < i; j++) {
					groups.push([]);
				}
				for (let k = 0; k < data.length; k++) {
					const groupIndex = k % i;
					groups[groupIndex].push(data[k]);
				}
				return groups;
			},
			loadMoreData() {
				this.searchLoading = true
				this.searchLoadingComplete = true
				this.getGoodsList();
				this.searchLoading = false;
				this.searchLoadingComplete = false;
			},
			// // 获取code
			getCode() {
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res)
						this.login_code = res.code // 获得的code
						if (this.login_code) {
							this.laoyonghu()
						}
					}
				});
			},
			async laoyonghu() {
				console.log(self.login_code)
				var dataPost = {
					login_code: self.login_code,
				}
				const {
					data: res
				} = await uni.$http.post('getOpenid/', dataPost)
				if (res.code == 200) {
					console.log(res)
					self.sk = res.data.sk
					self.openid = res.data.oi


					// uni.showToast({ title:res.data.phoneNumber, icon: "none", duration:1000 })
					// setTimeout(() => {  self.login() }, 1000);
					// console.log('dsss:',res);
				} else {
					console.log('error:' + res.msg);
				}
			},

			videoPause(e) {
				// console.log("暂停",e)
				uni.setStorageSync('hasPause', false)
			},
			videoPlay(e) {
				// console.log("暂停",e)
				uni.setStorageSync('hasPause', true)
			},
			// 位置授权
			getAuthorizeInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						console.log("你已经允许授权")
						self.getLocationInfo();
					},
					fail() { // 拒绝授权
						self.openConfirm();
						console.log("你拒绝了授权")
					}
				})
			},
			// 再次获取授权，当用户第一次拒绝后再次请求授权
			openConfirm() {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '您拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 3000
							})
						}
					}
				});
			},
			// 位置授权成功后，自动获取地理位置经纬度
			getLocationInfo() {
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						self.location.latitude = res.latitude;
						self.location.longitude = res.longitude;
						// uni.showToast({
						// 	title: '经纬度：' + self.location.latitude + self.location.longitude,
						// 	icon: "none"
						// })
						// 每次进来先清空,然后重新加载

						self.getGoodsList()
					},
					fail(res) {
						console.log(res)
					}
				});
			},

			async getGoodsList() {
				const postmsg = {
					searchKey: this.searchKey,
					wei: parseFloat(this.location.latitude),
					jing: parseFloat(this.location.longitude),
					page: this.page,
					type: this.type,
					juli: this.rangevalue == '' ? 0 : this.rangevalue,
					leibie: this.typetext == '' ? '全部' : this.typetext
				}
				// console.log(postmsg)

				const {
					data: res
				} = await uni.$http.post('getGoodsList/', postmsg)
				if (res.code == 200) {
					uni.stopPullDownRefresh();
					// setTimeout(function() {
					if (res.data.length > 0) {
						var goodslist1 = []
						//不应该取最后一个, 应该取最大的id
						// self.page = res.data[res.data.length - 1].id

						self.goodslistnum = res.data.length
						var dest = [];
						self.page = res.data[0].id
						for (let i = 0; i < res.data.length; i++) {

							if (res.data[i].id < self.page) {
								self.page = res.data[i].id
							}

							var obj = {}
							obj.id = res.data[i].id;
							obj.goodstype = res.data[i].goodstype
							obj.goodsid = res.data[i].goodsid
							obj.goodsname = res.data[i].goodsname
							obj.goodsdetail = res.data[i].goodsdetail
							obj.imagelist = JSON.parse(res.data[i].imagelist);
							obj.image = obj.imagelist[0]
							obj.date = res.data[i].date
							// obj.username = res[i].username
							// obj.nickname = unescape(res[i].nickname)
							obj.address = res.data[i].address
							obj.latitude = res.data[i].latitude
							obj.longitude = res.data[i].longitude
							obj.juli = res.data[i].juli;
							obj.money = res.data[i].money;
							obj.type = res.data[i].type;
							// obj.distance = 0
							// var jwd = {}
							// jwd.latitude = res.datalist[i].latitude
							// jwd.longitude = res.datalist[i].longitude
							//       dest.push(jwd)
							goodslist1.push(obj)
						}
						goodslist1.sort((a, b) => (a.juli - b.juli))
						this.goodslist = this.goodslist.concat(goodslist1)

						this.initData(); // 数据初始化


						// self.goodslist.forEach((goods, index) => {
						// 	if (index % 2 === 0) {
						// 		self.leftGoodsList.push(goods);
						// 	} else {
						// 		self.rightGoodsList.push(goods);
						// 	}
						// });
						// var start={ latitude: parseFloat(self.location.latitude), longitude: parseFloat(self.location.longitude) };
						// qqmapsdk.calculateDistance({
						//   from:start,
						// to:dest,
						// success: function(res) {
						//   var res = res.result;
						//   var dis = [];
						//   for (var i = 0; i < res.elements.length; i++) {
						// 	dis.push(res.elements[i].distance); //将返回数据存入dis数组，
						// 	self.goodslist[i].distance = res.elements[i].distance/1000
						// 	// console.log('calculateDistance:',start,dest,self.goodslist[i].distance)
						// 	// console.log('goodslist:'+self.goodslist[i].goodsname+self.goodslist[i].distance)
						//   }
						// },
						// fail: function(error) {
						//   console.error(error);
						// },
						// complete: function(res) {
						//   // console.log(res);
						// }
						// });

					}
					//   uni.hideLoading();
					// }, 300);


				} else {
					// uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '系统繁忙中，请稍后再试...',
						duration: 1000
					})
				}
			},


			publishClick() {
				if (uni.getStorageSync('hasLogin')) {
					uni.navigateTo({
						url: '/pages/home/btnpublish'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '登陆后可体验更多功能~',
						duration: 2000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 100);
				}
			},

			rangechange(e) {

				this.rangevalue = e
				//回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.page = 0;

				this.goodslist = [];
				this.leftGoodsList = [];
				this.rightGoodsList = [];
				this.getGoodsList();
				// console.log('rangevalue---',this.rangevalue)
			},
			typechange(e) {
				this.typevalue = e
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				var obj = this.types.find(function(i) {
					//listData就是上面的数据源
					return i.value === e; //筛选出匹配数据
				});
				// console.log(obj);

				this.typetext = obj ? obj.text : '';
				this.page = 0;
				this.goodslist = [];
				this.leftGoodsList = [];
				this.rightGoodsList = [];
				this.getGoodsList();
				// console.log('typevalue---',this.typevalue, this.types[2].text)
			},

			goodsClick(k,j) {
				// console.log(this.groupList)
				// console.log(this.groupList[k][j])
				const item=this.groupList[k][j]
				if (uni.getStorageSync('hasLogin')) {
					uni.navigateTo({
						url: '/pages/home/goodsdetail?goodsid=' + item.goodsid
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '登陆后可体验更多功能~',
						duration: 2000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				}

			},

			// 触发关键词输入提示事件
			getsuggest: function(e) {
				self.searchKey = e.detail.value;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.page = 0;
				this.goodslist = [];
				this.leftGoodsList = [];
				this.rightGoodsList = [];
				this.rangevalue = '';
				this.typevalue = '';

				self.getGoodsList()
			},

			mapClick() {
				if (uni.getStorageSync('hasLogin')) {
					uni.navigateTo({
						url: '/pages/home/goodsmap?searchKey=' + self.searchKey
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '登陆后可体验更多功能~',
						duration: 2000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				}

			},
			turnTo(val) {
				if (uni.getStorageSync('hasLogin')) {
					// 不用跳,重新请求数据就行
					// this.type = val
					// this.page = 0;
					// this.goodslist = [];
					// self.getGoodsList()
					uni.navigateTo({
						url: '/pages/home/' + val
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '登陆后可体验更多功能~',
						duration: 2000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				}
			}
		}

	}
</script>

<style lang="scss">
	.pubuItem {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		$borderRadius: 12rpx;

		.cont-box {
			width: var(--layout-width);

			.item-box {
				width: 100%;
				margin-bottom: 30rpx;
				border-radius: $borderRadius;
				box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);

				.img-tip {
					width: 100%;
					border-radius: $borderRadius $borderRadius 0 0;
				}

				.des-box {
					padding: 10rpx;
					box-sizing: border-box;
					font-size: 20rpx;

					.filter {
						padding: 10rpx 10rpx 0 0;
						color: #9CA2D9;
						display: flex;
					}

					.icon-location {
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
						transform: translateY(5rpx);
					}

					.score {
						position: relative;
						font-size: 24rpx;

						.em {
							color: #5553AA;
							font-weight: bold;

							.red {
								color: #E81456;
								font-size: 30rpx;
							}
						}
					}

					.tit-tip {
						font-size: 30rpx;
						color: #5553AA;
						font-weight: bold;
						line-height: 40rpx;
						// text-align: justify;
						// padding: 10rpx 20rpx 0;
						// font-weight: 900;
					}

					.desc-tip {
						text-align: justify;
						font-size: 26rpx;
						padding: 5rpx 20rpx 0;
						margin-top: 10rpx;
					}
				}


			}
		}
	}

	/* 多行省略 */
	// .multi-line-omit {
	// 	word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
	// 	text-overflow: ellipsis; // 溢出用省略号显示
	// 	overflow: hidden; // 超出的文本隐藏
	// 	display: -webkit-box; // 作为弹性伸缩盒子模型显示
	// 	-webkit-line-clamp: 2; // 显示的行
	// 	-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	// }

	/* 单行省略 */
	// .one-line-omit {
	// 	width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
	// 	white-space: nowrap; // 溢出不换行
	// 	overflow: hidden; // 超出的文本隐藏
	// 	text-overflow: ellipsis; // 溢出用省略号显示
	// }

	.container {
		padding: 0
	}

	.noticebox {
		background-color: #e41f19;
		margin: 4px 9px;
		padding: 0 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		color: #fff;

		swiper {
			margin-left: 10px;
			flex: 1;
			height: 50px;
			background-color: #e41f19;

			swiper-item {
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 14px;
			}
		}

	}

	.searchbox {
		background-color: #6C64D0;
		z-index: 0;
		padding: 20rpx 0;
		width: 100%;
		// background-color: rebeccapurple;
		height: 40px;

		.search {
			// background-color: #2fffff;
			display: flex;
			justify-content: start;
			padding: 0 30rpx;
			box-sizing: border-box;

			.icon-map {
				width: 36rpx;
				height: 36rpx;

			}

			.searchinputbox {
				// background-color: rebeccapurple;
				background: rgb(166, 164, 229);
				border: 4rpx solid #9692D6;
				border-radius: 70rpx;
				flex: 1;

				.search-input {
					color: rgb(68, 66, 158);
					font-size: 28rpx;
					height: 63rpx;
					line-height: 63rpx;
					padding-left: 46rpx;

					.placeholder {
						color: rgb(68, 66, 158);
					}
				}

				.search-text {
					width: 90rpx;
					font-size: 24rpx;
					text-align: center;

					.icon-search {
						width: 44rpx;
						height: 44rpx;
					}

				}
			}

			.search-map {
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				padding-right: 20rpx;
			}
		}

		.option {
			width: 80%;
			position: absolute;
			z-index: 4;
			top: 70px;
			background-color: #efefef;
			padding: 10px 10px;

			.column_item {
				margin-bottom: 5px;
			}
		}
	}

	.swiperbox {
		width: 100%;
		height: 300rpx;
		background-color: #6C64D0;

		//margin-bottom: 30rpx;
		swiper {
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.selectbox {
		display: flex;
		justify-content: center;
		padding: 20rpx 38rpx 0;

		.rangeselectbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			position: relative;

			.icon {
				position: absolute;
				right: 40rpx;
				bottom: 10rpx;

				image {
					width: 18rpx;
					height: 18rpx;
				}
			}

			uni-data-select {
				width: 340rpx;
				// height: 100%;
				// background-color: #ffdf25;
				// border-radius: 20px;
				color: #000;

				.uni-select {
					border-radius: 34rpx 0px 0px 34rpx;
					border: 1px solid rgb(191, 196, 242);
					height: 56rpx;

					.uni-select__input-box {
						height: 56rpx;
					}

					.uni-select__selector {
						width: 240rpx;
						position: absolute;
						top: calc(100% + 10rpx);
						left: 100rpx;
						color: #5553AA;
						padding: 0 20rpx;

						.uni-popper__arrow {
							left: 75%
						}

						.uni-select__selector-item {
							text-align: center;
							border-bottom: 1rpx solid #BDC3FE;

							text {
								width: 90%;
							}

							&:last-child {
								border-bottom: none;
							}
						}
					}
				}

				.uni-select__input-text {
					color: #5553AA;
					transform: translateX(-20rpx);
					font-size: 24rpx;
				}

				.uni-icons {
					display: none;
				}
			}
		}

		.typeselectbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			position: relative;

			.icon {
				position: absolute;
				right: 40rpx;
				bottom: 10rpx;

				image {
					width: 18rpx;
					height: 18rpx;
				}
			}

			uni-data-select {
				width: 340rpx;
				// height: 100%;
				// background-color: #ffdf25;
				// border-radius: 20px;
				color: #000;
			}

			.uni-select {
				border-radius: 0rpx 34px 34px 0rpx;
				border: 1px solid rgb(191, 196, 242);
				height: 56rpx;

				.uni-select__input-box {
					height: 56rpx;
				}

				.uni-select__selector {
					width: 240rpx;
					position: absolute;
					top: calc(100% + 10rpx);
					left: 100rpx;
					color: #5553AA;
					padding: 0 20rpx;

					.uni-popper__arrow {
						left: 75%
					}

					.uni-select__selector-item {
						text-align: center;
						border-bottom: 1rpx solid #BDC3FE;

						text {
							width: 90%;
						}

						&:last-child {
							border-bottom: none;
						}
					}
				}
			}

			.uni-select__input-text {
				color: #5553AA;
				transform: translateX(-20rpx);
				font-size: 24rpx;
			}

			.uni-icons {
				display: none;
			}
		}
	}

	.icon-hot {
		width: 317rpx;
		height: 72rpx;
		display: block;
		margin: 0 auto;
	}

	.line {
		height: 1rpx;
		background: rgb(233, 235, 254);
		margin: 0 38rpx;
	}

	.zonebox {
		display: flex;
		justify-content: space-evenly;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		//border-bottom: 0.5px solid rgb(233, 235, 254);

		.box-item {
			width: 330rpx;
			display: flex;
			justify-content: space-around;
			padding: 26rpx 0 6rpx;

			image {
				width: 88rpx;
				height: 88rpx;
			}

			>view {
				h4 {
					color: rgb(57, 56, 56);
					font-size: 30rpx;
					font-weight: 500;
					line-height: 44rpx;
					letter-spacing: 0;
					text-align: right;
				}

				h6 {
					color: rgb(99, 99, 99);
					font-size: 20rpx;
					font-weight: 400;
					line-height: 28rpx;
					letter-spacing: 0;
					text-align: right;
				}
			}

			&.share {
				border-radius: 10px;
				background: linear-gradient(237.44deg, rgb(248, 232, 255) 1.637%, rgb(254, 252, 255) 28.062%, rgb(251, 247, 255) 60.569%, rgb(248, 242, 255) 81.441%);
			}

			&.sell {
				border-radius: 10px;
				background: linear-gradient(239.04deg, rgb(208, 204, 255) 1.532%, rgb(250, 247, 255) 27.464%, rgb(238, 241, 255) 56.359%, rgb(227, 230, 255) 97.85%);
			}
		}
	}

	.goodslistBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		//padding-top: 30rpx;

		// background-color: #ffdf25;
		.goodsbox {
			// background-color: aquamarine;
			padding: 0rpx 29rpx 15rpx;
			box-sizing: border-box;

			.goods-list {
				// display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

			}
		}
	}

	/* 没有更多了 */
	.no-more {
		font-size: 24rpx;
		color: #5750B0;
		padding: 20rpx 0;
		text-align: center;
	}

	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素

		.movableView1 {
			pointer-events: auto; //可以点击
			width: 120rpx;
			height: 120rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.movableView2 {
			pointer-events: auto; //可以点击
			width: 48px;
			height: 48px;

			button {
				background: #ffffff;
				width: 100%;
				height: 100%;
				border-radius: 24px;
				box-shadow: 0upx 0upx 20upx rgba(250, 67, 106, 0.3);

				.content {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.u-icon {
						margin-top: 6px;
					}

					.textbox {
						font-size: 10px;
						margin-top: -8px;
					}
				}

			}
		}

		.movableView3 {
			pointer-events: auto; //可以点击
			width: 48px;
			height: 48px;

			button {
				background: #ffffff;
				width: 100%;
				height: 100%;
				border-radius: 24px;
				box-shadow: 0upx 0upx 20upx rgba(250, 67, 106, 0.3);

				.content {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.u-icon {
						margin-top: 6px;
					}

					.textbox {
						font-size: 10px;
						margin-top: -8px;
					}
				}

			}
		}
	}
</style>